<!-- 首页，地图展示页 -->
<template>
	<view class="index-page">
		<!-- 监测点选择器 -->
		<view class="search-nav">
			<label>监测点：</label>
			<picker mode="selector" :range="markers" @change="pickerChange" v-model="index" range-key="siteName">
				<uni-easyinput placeholder="请选择监测点" v-model='markers[index].siteName' name='' disabled="disabled"
					suffixIcon="arrowdown" :styles="styles"></uni-easyinput>
			</picker>
		</view>
		<!-- 地图 -->
		<view class="map_container" :style="{'height':windowHeight+'px'}">
			<map class="map" id="map" :longitude="longitude" :latitude="latitude" :scale="mapScale"
				:show-location="false" :markers="markers" @markertap="makertap" @callouttap="makertap">
			</map>
		</view>
	</view>
</template>

<script>
	// 引入腾讯地图SDK核心类
	import QQMapWX from "../../qqmap-wx-jssdk1.2/qqmap-wx-jssdk.js";

	export default {
		data() {
			return {
				index: '',	//picker默认下标
				markers: [], //标记点
				longitude: '', //经度
				latitude: '', //纬度
				mapScale: '12', //地图缩放等级
				// statusBarHeight: 20, //默认状态栏的高度
				// navBarHeight: 45, //在html中是45px的高度
				windowWidth: 375,	//页面可用宽度
				windowHeight: 500,	//页面可用高度
				styles: { //uni-easyinput 样式
					disableColor: 'unset', //input 禁用时的背景颜色
				}
			}
		},
		onLoad: function() {
			this.initMap();	//页面加载时初始化地图
		},
		created() {
			//同步方法,获取手机系统信息
			const info = uni.getSystemInfoSync();
			/* 设置状态栏的高度 */
			// this.statusBarHeight = info.statusBarHeight;
			// // #ifndef H5 || APP-PLUS || MP-ALIPAY
			// //获取胶囊的位置
			// const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			// //(胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			// this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
			// 	.statusBarHeight);
			// this.windowWidth = menuButtonInfo.left;
			// // #endif
			// 获取手机可用高度用于地图填充展示
			this.windowHeight = info.windowHeight;
		},
		mounted() {
			this.timerTask = setInterval(this.getDataAll, 65000); //定时器 定时加载地图
		},
		beforeDestroy() {
			clearInterval(this.timerTask); //移除定时器
		},
		methods: {
			// 加载地图
			initMap: function() {
				let that = this;
				// 设置地图中心点
				that.latitude = 26.561234;
				that.longitude = 106.682893;
				that.getDataAll();	
			},
			// 获取后端数据传入markers
			getDataAll: function() {
				let _this = this;
				_this.getAjax(_this.baseApi + '/monitorValue/getListTable', {}, function(res) {
					let datas = res.data.data;
					let index = 0;
					datas.forEach(item => {	//遍历获取到的数据，添加所需的属性
						item.id = index++;	//markerId
						item.title = item.siteName;
						item.iconPath = '../../static/img/icons/icon_marker_red.png';	//标记点图标
						item.width = '30';	//标记点图标宽
						item.height = '34';	//标记点图标高
						_this.reverseLocation({	//调用坐标转换，将后台传入的百度坐标BD09转换为gcj02坐标
							latitude: item.lat,	
							longitude: item.lng
						}, function(location) {
							item.latitude = location.lat;
							item.longitude = location.lng;
						});
						item.latitude = '';
						item.longitude = '';
						item.callout = { //callout气泡
							display: "ALWAYS", //显示方式，可选值BYCLICK
							content: item.siteName + ' ' + item.count+'dB', //文本
							color: '#009ae7', //文本颜色
							borderRadius: 5, //边框圆角
							borderWidth: 1, //边框宽度
							borderColor: '#cbcbcb', //边框颜色
							bgColor: '#ffffff', //背景色
							padding: 5, //文本边缘留白
							textAlign: 'center' //文本对齐方式。有效值: left, right, center
						};
					})
					_this.markers = datas;
				});
			},
			//gcj02坐标转换方法
			reverseLocation: function(params, callback) {	//传入第三方坐标对象params
				// 实例化腾讯地图API核心类
				let demo = new QQMapWX({
					key: 'CFLBZ-BQCEF-7KBJI-NAGQE-X6WWS-7SBJW' // 必填 腾讯地图密钥
				});
				// 调用接口将第三方坐标转换为gcj02坐标
				demo.reverseGeocoder({
					location: params,	//传入第三方坐标
					coord_type: 3, //baidu经纬度
					success: res => {	//返回坐标位置相关信息
						location = res.result.location;	//获取转换后的坐标
						callback(location);	//返回坐标
					}
				});
			},
			// 选择器发生改变时
			pickerChange(e) {
				// 普通选择器赋值
				this.index = e.target.value;	//获取当前下标
				this.latitude = this.markers[this.index].latitude; //将中心点经纬度坐标赋值为当前选项的坐标
				this.longitude = this.markers[this.index].longitude;
				this.mapScale = 16;	//更改地图缩放等级
			},
			//点击标记点事件
			makertap: function(e) {
				let that = this;
				//获取当前标记点对象，提取需要的属性传到跳转后的页面
				let json = this.markers[e.markerId];
				let params = 'kid=' + json.kid + '&siteName=' + json.siteName + '&count=' + json.count + '&address=' +
					json.address;
				uni.navigateTo({
					url: '../monitorData/monitorData?' + params,
					success: res => {

					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	/* 监测点picker */
	.search-nav {
		display: flex;
		align-items: center;
		padding: 10rpx 5%;
		background-color: #FFFFFF;
	}

	.search-nav picker {
		flex: 1;
	}
	
	/* map */
	.map_container {
		width: 100%;
	}

	.map {
		height: 100%;
		width: 100%;
	}

	/* .baidumap>.BMap_cpyCtrl {
		display: none !important;
	}

	.baidumap>.anchorBL {
		display: none !important;
	} */
</style>
